<!-- 企业会员 -->
<template>
	<view class="pd-lr30" :style="{ '--color': vuex_config.themeColor1 }">
		<u-form :model="form" ref="userInfo_form">
			<u-form-item label="姓名" label-width="134rpx" label-height="87rpx" prop="name" required>
				<u-input v-model="form.name" placeholder="请输入姓名" :disabled="checkRegister"/>
			</u-form-item>
			<u-form-item label="手机号" label-width="134rpx" label-height="87rpx" prop="phone" required>
				<u-input v-model="form.phone" type="number" placeholder="请输入手机号" :disabled="checkRegister"/>
			</u-form-item>
			<u-form-item label="身份证" label-width="134rpx" label-height="87rpx" prop="card_no" required>
				<u-input v-model="form.card_no" placeholder="请输入身份证" :disabled="checkRegister"/>
			</u-form-item>


			<view class="glo_bot_main" v-if="!checkRegister">
				<view class="glo_bot_fix">
					<view class="glo_button" @click="submit" :style="{ background: vuex_config.themeColor1 }">提交绑定</view>
				</view>
			</view>


		</u-form>
	</view>
</template>

<script>
	import {
		uploadImage
	} from '@/utils/upload';

	import {
		isMobile,
		idCard
	} from '@/utils/validate';
	export default {
		data() {
			return {
				form: {
					name: '',
					phone: '',
					card_no: ''
				},
				checkRegister:false,//判断是否注册了
				rules: {
					name: {
						required: true, //必填
						message: '请输入姓名',
						trigger: 'blur' //触发方法类型，支持多个方法
					},
					phone: {
						required: true, //必填
						message: '请正确输入手机号',
						trigger: 'blur', //触发方法类型，支持多个方法
						method: isMobile
					},
					card_no: {
						required: true, //必填
						message: '请正确输入身份证',
						trigger: 'blur', //触发方法类型，支持多个方法
						method: idCard
					},
				}
			}
		},
		onLoad() {
			this.initPage()
		},
		methods: {
			initPage() {
				this.$resPost('GetMeetingUsers').then(res => {
					if (res.data.pk_id) {
						this.checkRegister = true
						Object.assign(this.form,res.data)
					}
				})
			},
			submit() {
				let judeg = true
				for (let i in this.rules) {
					if (this.rules[i].method && !this.rules[i].method(this.form[i])) {
						this.$toast(this.rules[i].message)
						judeg = false
						return
					}
					if (this.form[i] == '' && judeg) {
						this.$toast(this.rules[i].message)
						judeg = false
					}
				}
				if (!judeg) return
				uni.showLoading({
					title: '正在提交'
				})
				this.form.name = this.form.name.trim()
				this.form.phone = this.form.phone.trim()
				this.form.card_no = this.form.card_no.trim()

				this.$resPost('SetMeetingUsers', {
					...this.form
				}).then(res => {
					uni.hideLoading()
					if (res.Status == 1) {
						this.$toast('职工信息绑定成功')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1000)
						return
					}
					this.$toast('该职工信息不存在')
				}).catch(()=>{})


			}
		}
	}
</script>

<style lang="scss" scoped>
	.pd-lr30 {
		padding: 0 30rpx;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		margin-left: auto;
		background-color: #f5f5f5;
		border-radius: 50%;
		overflow: hidden;
	}

	.arrow_box {
		display: flex;
		align-items: center;

		.cell_cont {
			flex: 1;
			overflow: hidden;
			text-align: right;
		}

		.icon_arrow {
			color: #bfbfbf;
			text-align: right;
			padding-left: 10rpx;
		}
	}

	.label_text {
		max-height: 420rpx;
		overflow-y: auto;
		padding: 0 30rpx;
		display: flex;
		margin-top: 50rpx;
		flex-wrap: wrap;
		align-items: center;

		.label_item {
			line-height: 46rpx;
			padding: 0 16rpx;
			font-size: 26rpx;
			margin-right: 29rpx;
			margin-bottom: 29rpx;
			border: 1px solid #bfbfbf;
			color: #bfbfbf;
		}

		// 选择标签之后的样式
		.label_color {
			border: 1px solid var(--color);
			color: var(--color);
		}
	}

	.btn_box {
		height: 100rpx;

		.post {
			z-index: 100;
			position: fixed;
			background-color: #fff;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;

			.btn {
				color: #fff;
				background-color: var(--color);
				width: 660rpx;
				height: 70rpx;
				line-height: 70rpx;
			}
		}
	}

	/deep/ .u-input__input {
		text-align: right;
	}

	/deep/ .u-form-item {
		text-align: right;
	}

	/deep/ .u-form-item--left__content__label {
		margin-left: 5rpx;
	}

	/deep/ .uni-input-wrapper {
		margin-left: 30rpx;
	}
</style>
